页面和路由

在Next.js中，页面和路由是构建应用的基础。理解如何创建页面和配置路由是掌握Next.js的关键。本教程将详细介绍如何在Next.js中创建页面和配置路由，并通过代码示例和实践练习帮助你掌握这些概念。

1. 页面基础

1.1 什么是页面？

在Next.js中，页面是基于文件系统的。每个.js、.jsx、.ts或.tsx文件都会自动转换为一个路由。例如，pages/index.js文件对应的是应用的首页，pages/about.js文件对应的是“关于”页面。

1.2 创建第一个页面

首先，我们在pages目录下创建一个名为about.js的文件。

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>关于我们</h1>
      <p>这是一个关于我们的页面。</p>
    </div>
  );
}

现在，当你访问http://localhost:3000/about时，你会看到这个页面。

2. 路由基础

2.1 什么是路由？

路由决定了用户在访问某个URL时，应该显示哪个页面。在Next.js中，路由是自动生成的，基于你在pages目录下创建的文件。

2.2 基本路由

如前所述，pages/index.js对应的是根路径/，pages/about.js对应的是/about。

2.3 动态路由

Next.js支持动态路由，允许你根据URL中的参数动态生成页面。例如，如果你想创建一个博客系统，每个博客文章都有一个唯一的ID，你可以使用动态路由。

在pages目录下创建一个名为posts的文件夹，并在其中创建一个名为[id].js的文件。

// pages/posts/[id].js
export default function Post({ id }) {
  return (
    <div>
      <h1>博客文章 {id}</h1>
      <p>这是博客文章 {id} 的内容。</p>
    </div>
  );
}

export async function getServerSideProps({ params }) {
  const { id } = params;
  return {
    props: {
      id,
    },
  };
}

现在，当你访问http://localhost:3000/posts/123时，你会看到一个显示“博客文章 123”的页面。

3. 实践练习

3.1 创建多个页面

1. 在pages目录下创建以下文件：

   • pages/contact.js
   • pages/services.js

2. 分别在每个文件中创建一个简单的页面，例如：

// pages/contact.js
export default function Contact() {
  return (
    <div>
      <h1>联系我们</h1>
      <p>这是联系我们的页面。</p>
    </div>
  );
}

// pages/services.js
export default function Services() {
  return (
    <div>
      <h1>我们的服务</h1>
      <p>这是我们的服务页面。</p>
    </div>
  );
}

3.2 创建动态路由

1. 在pages目录下创建一个名为products的文件夹，并在其中创建一个名为[productId].js的文件。

2. 在[productId].js文件中创建一个动态路由页面，例如：

// pages/products/[productId].js
export default function Product({ productId }) {
  return (
    <div>
      <h1>产品 {productId}</h1>
      <p>这是产品 {productId} 的详细信息。</p>
    </div>
  );
}

export async function getServerSideProps({ params }) {
  const { productId } = params;
  return {
    props: {
      productId,
    },
  };
}

3. 访问http://localhost:3000/products/456，你应该会看到一个显示“产品 456”的页面。

4. 总结

通过本教程，你已经学会了如何在Next.js中创建页面和配置路由。你了解了如何使用静态路由和动态路由来构建复杂的应用。接下来，你可以继续学习Next.js的其他高级特性，如数据获取、API路由、CSS模块等。

希望本教程对你有所帮助，祝你在Next.js的学习旅程中取得成功！